<template>
  <view class="activity">
      <swiper next-margin	="100rpx" :current="current" @change="handleChange">
         <swiper-item v-for="(item,index) in list" :key="index">
          <view class="item" >
              <view class="bg">
                <image class="bgImg" :src="item.imagesList[0]" mode="aspectFill"></image>
                <view class="head">
                    <view class="title">{{item.title}}</view>
                    <view class="btns">
                        <view class="btn success">报名中</view>
                        <view class="btn info">{{item.tags}}</view>
                    </view>
                </view>
                <view class="text"> 
                    <view class="lf">
                      <img src="/static/map/icon3.png" alt="">
                      <span>{{item.startTime}}</span>
                    </view>
                </view>
                <view class="text"> 
                    <view class="lf">
                      <img src="/static/map/icon2.png" alt="">
                      <span>{{item.locationDescription}}</span>
                    </view>
                    <span class="km">5.1km</span>
                </view>
              </view>
              <view class="content">
                  <view class="join">
                      <view class="lf">
                          <image :src="v.portrait" mode="aspectFill" v-for="(v,i) in item.teammateList" :key="i"></image>
                          <span>等{{ item.teammateList.length}}人想参加</span>
                      </view>
                      <view class="btn">我想参加</view>
                  </view>
              </view>
          </view>
         </swiper-item>
      </swiper>
      
  </view>
</template>
<script>
export default {
  props:{
    current:{
      type:Number,
      default:0
    },
    list:{
      type:Array,
      default:[]
    }
  },
  methods: {
    handleChange(item){
      const index=item.detail.current
      this.$emit("change",index)
    }
  },
}
</script>
<style lang="scss" scoped>
  .activity{
    position: fixed;
    bottom: 100rpx;
    left: 0;
    width: 100%;
    .item{
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      overflow: hidden;
      margin: 0 30rpx;
      .bg{
        padding: 30rpx 40rpx 18rpx 40rpx;
        background-color: rgba(0,0,0,0.4);
        position: relative;
        .bgImg{
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
        }
        .head{
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 22rpx;
          .title{
            font-weight: 500;
            font-size: 28rpx;
            color: #FFFFFF;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .btns{
            display: flex;
            .btn{
              width: 94rpx;
              height: 32rpx;
              line-height: 32rpx;
              border-radius: 8rpx 8rpx 8rpx 8rpx;
              border: 1rpx solid #101011;
              text-align: center;
              font-size: 22rpx;
            }
            .btn+.btn{
              margin-left: 10rpx;
            }
            .btn.success{
              background: linear-gradient( 270deg, #16D998 0%, #87F8FF 100%);
            }
            .btn.info{
              background: #101011;
              color: #17E5A1;
            }
          }
        }
        .text{
          font-family: Manrope, Manrope;
          font-weight: 400;
          font-size: 20rpx;
          color: #FFFFFF;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .lf{
            display: flex;
            align-items: center;
            width: 85%;
            img{
              width: 24rpx;
              height: 24rpx;
              margin-right: 10rpx;
            }
            span{
              flex:1;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          
        }
        .text+.text{
          margin-top: 12rpx;
        }
      }
      .content{
        padding: 40rpx;
        background: #F5F6F7;
        .join{
          background: linear-gradient( 278deg, rgba(22,217,152,0.16) 0%, rgba(255,255,255,0) 100%);
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-radius: 100rpx;
          .lf{
            display: flex;
            align-items: center;
            span{
              margin-left: 12rpx;
              font-size: 24rpx;
              color: #606266;
            }
            image{
              width: 50rpx;
              height: 50rpx;
              background: #D8D8D8;
              border-radius: 50%;
              box-shadow: 0rpx 4rpx 96rpx 0rpx rgba(0,0,0,0.06);
            }
          }
          .btn{
            width: 160rpx;
            text-align: center;
            height: 52rpx;
            line-height: 52rpx;
            background: #16D998;
            border-radius: 50rpx 50rpx 50rpx 50rpx;
          }
        }
      }
    }
  }
</style>